<template>
	<view class="content">
		<view class="top flex flex-row justify-between  items-center w100">
			<view class="xzx flex flex-row  items-center">
				<view class="flex flex-row justify-end">
					<picker @change="bindPickerChange" :value="0" :range="rangeArr" range-key="text">
						<view class="flex flex-row f_28" :class="city?'c_52':'c_ae'">
							{{city!=''?city:'请选择县'}}
							<i class="iconfont icon-sjt c_3"></i>
						</view>
					</picker>
				</view>
			</view>
			<view class="search flex flex-row justify-start items-center">
				<u-icon name="search" color="#2979ff" size="18"></u-icon>
				<input type="text" value="" v-model="keywords" placeholder="搜索" />
			</view>


		</view>

		<view class="list flex flex-col justify-start items-center">
			<view class="item flex flex-col justify-start items-center w100" v-for="(item,index) in list"  :key="index" >
				<image src="@/static/image/bannerbg.png" mode="widthFix" class="w100"></image>
				<view class="name flex flex-col justify-center items-start" :class="'name_'+(index+1)">
					<view class="flex flex-row justify-start items-center">
						
						<image class="i_img" src="@/static/image/cicon01.png" mode="widthFix"></image>
						<text class="f_48 f_bold f_white">{{item.name}}</text>
					</view>	
					<view class="flex flex-row justify-start items-center mt10">
						<image class="i_img i_img1" src="@/static/image/cicon02.png" mode="widthFix"></image>
						<text class="f_28 f_bold f_white">{{item.adress}}</text>
					</view>	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '严桥村村委',
						adress: '建湖县高新区(塘河街道)...'
					},

					{
						name: '永丰村村委',
						adress: '建湖县高新区(塘河街道)...'
					},

					{
						name: '永安村村委',
						adress: '建湖县高新区(塘河街道)...'
					},

					{
						name: '磐安村村委',
						adress: '建湖县高新区(塘河街道)...'
					},
					{
						name: '磐安村村委',
						adress: '建湖县高新区(塘河街道)...'
					}
				],
				keywords: '',
				city: '',
				rangeArr: [{
					text: '建湖县',
					value: 0

				}]
			}
		},
		onLoad() {

		},
		methods: {
			bindPickerChange(e) {
				console.log(e.detail.value)
				this.city = this.rangeArr[e.detail.value].text

			}
		}
	}
</script> 

<style lang="scss">
	.list{
		width: 100%;
		padding:20rpx;
		margin-top: 100rpx;
		box-sizing: border-box;
		
		.item{
			position: relative;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;
			.name{
				width: 100%;
				height: 100%;
				padding-left: 32rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top:0;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right,  rgba(0,0,0,0.7) 0%,rgba(2,86,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			
			}
			.name_1{
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right,  rgba(2,86,255,0.8) 0%,rgba(2,86,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				
			}
			.name_2{
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right,  rgba(14,152,105,0.8) 0%,rgba(14,152,105,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			
			}
			.name_3{
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right,  rgba(255,188,2,0.8) 0%,rgba(255,188,2,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			
			}
			.name_4{
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right,  rgba(255,2,2,0.8) 0%,rgba(255,2,2,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
			
			}
		}
		.i_img{
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}
		.i_img1{
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}
		
		
	}
	
	
	.top {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		padding: 20rpx 32rpx;
	}

	.search {
		width: 488rpx;
		height: 72rpx;
		background: #F9F9F9;
		border-radius: 56rpx;
		opacity: 1;
		border: 1rpx solid #E6E6E6;
		padding: 0 10rpx;
		box-sizing: border-box;

		input {
			background: none;
			border: none;
			margin-left: 10rpx;
			width: 400rpx;
		}
	}
</style>